<template>
    <h1>Hello</h1>
    <div class="router-wrapper">
        <ul>
            <li @click="router.push('/Home')" :class="{active: router.currentRoute.value.path === '/Home'}">首页</li>
            <li @click="router.push('/TypeList')" :class="{active: router.currentRoute.value.path === '/TypeList'}">列表</li>
            <li @click="router.push('/About')" :class="{active: router.currentRoute.value.path === '/About'}">关于</li>
        </ul>
        <div class="content">
            <RouterView />
        </div>
    </div>
</template>

<script setup name="Router">
    import { useRouter } from 'vue-router'
    const router = useRouter()

</script>

<style scoped>
    * {
        padding: 0;
        margin: 0;
    }
    body {
        background-color: #f5f5f5;
    }
    .router-wrapper {
        width: 720px;
        margin: 40px auto;
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }
    ul {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        background: #d1d1d1;
    }
    li {
        flex: 1;
        text-align: center;
        padding: 12px 0;
        cursor: pointer;
        font-size: 14px;
        color: #333;
        transition: background 0.25s ease, color 0.25s ease;
    }
    li:hover {
        background: #e5e5e5;
    }
    li.active {
        background: #ffffff;
        color: #007bff;
        font-weight: 600;
    }
    .content {
        height: 220px;
        padding: 16px;
        background: #ffffff;
        color: #333;
        line-height: 1.5;
        overflow-y: auto;
    }
    .active {
        color: #007bff;
        font-weight: 600;
    }
</style>